<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<script src="${pageContext.request.contextPath}/lib/validation/jquery.validate.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/lib/validation/cmxforms.js" type="text/javascript"></script>

<style type="text/css">
    #menu span, #menu a {
        display: none;
    }

    #login-slide {
        width: 960px;
        height: 430px;
        background: #FBF5EF;
        padding: 10px;
        margin: 0 0 10px -10px;
        overflow: hidden;
    }

    #slideShow {
        display: block;
        float: left;
        overflow: hidden;
        width: 600px;
        height: 430px;
        background: #F5ECCE;
        padding: 15px;
    }

    .slide {
        width: 600px;
        height: 430px;
        overflow: hidden;
        background: #FBF5EF;
    }

    .block {
        width: 300px;
        margin: 5px;
        padding: 5px;
        float: left;
        display: block;
        border-radius: 15px;
    }

    .block .title {
        text-align: center;
        clear: both;
        font-size: 14pt;
        background: #DAC083;
        padding: 5px;
        border-radius: 15px 15px 0 0;
    }

    .login {
        border: 1px solid #DAC083;
        background: #FBF5EF;
        padding: 0;
        float: right;
    }

    #login-form {
        font-size: 12pt;
    }

    #login-form .text {
        border: 1px solid #AAA;
        background: #FFF;
        color: #444;
    }

    .btn {
        font-weight: bold;
    }
    #left-bar-applicant {
        overflow: hidden;
    }
</style>
<script type="text/javascript">
    $(document).ready(function() {
        var index = 0;
        var images = $("#slideShow .slide");
        var imgHeight = $(images).attr("height");
        for (i = 0; i < images.length; i++) {
            $(images[i]).addClass("image-" + i);
        }

        show(index);
        setInterval(sift, 5000);

        function sift() {
            if (index < (images.length - 1)) {
                index += 1;
            } else {
                index = 0;
            }
            show(index);
        }

        function show(num) {
            $(images).fadeOut(400);
            $(".image-" + num).stop().fadeIn(400);
            var scrollPos = (num + 1) * imgHeight;
            console.log(scrollPos, "img.image-" + num);
        }
    });
</script>


<div id="slideShow">
    <%--  <div class="slide">
        <img src="${pageContext.request.contextPath}/images/w1.png" width="600px" height="430px"/>
    </div>--%>
    <div class="slide">
        <img src="${pageContext.request.contextPath}/images/w1.jpg" width="600px" height="430px"/>
    </div>
    <div class="slide">
        <img src="${pageContext.request.contextPath}/images/w2.jpg" width="600px" height="430px"/>
    </div>
    <div class="slide">
        <img src="${pageContext.request.contextPath}/images/w3.png" width="600px" height="430px"/>
    </div>
    <div class="slide">
        <img src="${pageContext.request.contextPath}/images/w4.jpg" width="600px" height="430px"/>
    </div>
    <div class="slide">
        <img src="${pageContext.request.contextPath}/images/w5.png" width="600px" height="430px"/>
    </div>
    <div class="slide">
        <img src="${pageContext.request.contextPath}/images/w6.png" width="600px" height="430px"/>
    </div>
</div>


<%--
<div class="block">
    <div class="block-data">
           <s:if test="hasActionErrors() || hasActionMessages()">
               <div id="message-box" class="message-box">
                   <div class="action-msg"><s:actionmessage/></div>
                   <div class="action-err"><s:actionerror/></div>
               </div>
           </s:if>
           <s:include value="./notifications.jsp"/>
           <div id="module-pannel-outer">
               <ul>

                   <s:if test="#session.userGroup=='slc'">
                       <li>
                           <s:a href="loadDetailApplicationListBySLC.do">
                               <img src="${pageContext.request.contextPath}/images/detailed-form.png"
                                    alt="Detailed Alienation Applications">
                               <span><s:label value="%{getText('detailed_alienation_applications.label')}"/></span>
                           </s:a>
                       </li>
                       <li>
                           <s:a href="homeSLC.do">
                               <img src="${pageContext.request.contextPath}/images/registration-form.png"
                                    alt="Modify Initial Land Information">
                               <span><s:label value="%{getText('modify_detail_alienation_application.label')}"/></span>
                           </s:a>
                       </li>
                   </s:if>
               </ul>
           </div>
    </div>
</div>
--%>
